<template>
  <div class="uploadFile">
    <el-dialog
      v-model="addCourseFileDialogForm"
      title="上传课程资源"
      width="1200px"
      center
    >
      <div style="display: flex;width: 100%;margin-bottom: 20px;">
        <div style="flex: 1">
          <Dropdown />
        </div>
        <div style="width: 350px;">
          <el-input style="width: 200px;margin-right: 10px" placeholder="请输入资源名称"
                    suffix-icon="el-icon-search" v-model="fileTitles"></el-input>
          <el-button class="ml-5" type="primary" @click="queryTitle">搜索</el-button>
          <el-button type="warning" @click="reset">重置</el-button>
        </div>
      </div>
      <el-table
        ref="multipleTableRef"
        :data="resourcesList"
        width="1200px"
        height="500px"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"/>
        <el-table-column prop="title" label="资源名称"/>
        <el-table-column prop="resourceSize" label="资源大小" width="300"/>
        <el-table-column prop="author" label="创建人" width="300"/>
      </el-table>
      <div style="display: flex;margin-top: 20px;width: 100%">
        <div style="flex: 1">
          <div class="demo-pagination-block">
            <el-pagination
              v-model:currentPage="paging.page"
              v-model:page-size="paging.pageSize"
              :page-sizes="[10, 50, 100, 500]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="paging.totalRecords"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <div style="width: 85px">
          <el-button type="primary" @click="uploadResources">开始上传</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script lang='ts' setup>
import {
  defineExpose, defineProps, getCurrentInstance, ref,
} from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage, ElTable } from 'element-plus';
import Request from '@/api/request/request';

type Props = {
  parentId?:number
}
const { proxy } = getCurrentInstance();
const route = useRoute();
const props = defineProps<Props>();

// 弹窗控制
const addCourseFileDialogForm = ref();
// 课程现有的所有资源
const resourcesList = ref();
// 计算资源文件总合
const total = ref();
// 章节上传资源
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
// 存课程资源弹窗中用户选中的值
const multipleSelection = ref();
// 二级菜单id
const chapterViceId = ref();
// 分页信息
const paging = ref({
  page: 1,
  pageSize: 10,
  totalRecords: 20,
});
// 搜索框绑定的键名
const fileTitles = ref('');

// 搜索资源
const queryTitle = async () => {
  const courseId = sessionStorage.getItem('courseId');
  let result:any = await new Request(`${proxy.$urls.API_URL_BACKSTAGE_SCHOOLCOURSERESOURCE_ALL_MANAGE}?courseId=${courseId}&title=${fileTitles.value}`).get();
  if (result.success) {
    resourcesList.value = result.data;
  }
};
// 重置搜索框
const reset = async () => {
  const courseId = sessionStorage.getItem('courseId');
  let resData: any = await new Request(`${proxy.$urls.API_URL_BACKSTAGE_SCHOOLCOURSERESOURCE_MANAGE}?courseId=${courseId}`).get();
  if (resData.success) {
    resourcesList.value = resData.data.data;
  }
  fileTitles.value = '';
};
// 获取该课程下的所有资源
const getCourseSession = async () => {
  let resData: any = await new Request(`${proxy.$urls.API_URL_BACKSTAGE_SCHOOLCOURSERESOURCE_MANAGE}`, null, {
    params: {
      courseId: sessionStorage.getItem('courseId'),
      pageSize: paging.value.pageSize,
      page: paging.value.page,
    },
  }).get();
  if (resData.code === 200) {
    paging.value = resData.data;
    resourcesList.value = resData.data.data;
  } else {
    resourcesList.value = [];
  }
};
// 每页总数发生改变
const handleSizeChange = (val:number) => {
  paging.value.pageSize = val;
  getCourseSession();
};
// 页码发生改变
const handleCurrentChange = (val:number) => {
  paging.value.page = val;
  getCourseSession();
};

// 点击二级菜单上传资源，获取课程现有的所有资源
const openDialog = (parentId: number) => {
  getCourseSession();
  chapterViceId.value = parentId;
  addCourseFileDialogForm.value = true;
};
// 获取资源列表勾选
const handleSelectionChange = (val:any) => {
  // eslint-disable-next-line prefer-destructuring
  multipleSelection.value = val;
};
// 上传章节资源
const uploadResources = async () => {
  if (multipleSelection.value !== undefined) {
    let list = JSON.parse(JSON.stringify(multipleSelection.value));
    let resourceIds = list.map((item:any) => item.id);
    let result: any = await new Request(`${proxy.$urls.API_URL_BACKSTAGE_SCHOOLCOURSERESOURCE_UPLOADDINGCHAPTERRESOURCES_MANAGE}`, {
      sectionId: chapterViceId.value,
      resourceIds,
    }).post();
    if (result.success) {
      ElMessage.success('上传资源成功');
    } else {
      ElMessage.error('上传资源失败');
    }
  } else {
    ElMessage.error('请选择资源后再上传');
  }
};

defineExpose({
  openDialog,
});

</script>

<style lang="scss" scoped>
</style>
